<template>
	<view class="content">
		<view class="content_swtab"
		 :style="{display: currentTabbar === 0 ? '' : 'none'}">
		  <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
		    <home ref="home"></home>
		  </scroll-view>
		</view>
		<view class="content_swtab"
		 :style="{display: currentTabbar === 1 ? '' : 'none'}">
		  
		    <share ref="share"></share>
		
		</view>
		<view class="content_swtab"
		 :style="{display: currentTabbar === 4 ? '' : 'none'}">
		  <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
		    <my ref="my"></my>
		  </scroll-view>
		</view>
		<template>
		  <TnTabbar 
			  v-model="currentTabbar" 
			  fixed 
			  bg-color="rgb(48, 47, 54)" 
			  :safe-area-inset-bottom="true"
			  switch-animation
			  safe-area-inset-bottom
			  placeholder	
		  >
			<TnTabbarItem
			  v-for="item in tabbarData"
			  :key="index"
			  :icon="item.icon"
			  :active-icon="item.activeIcon"
			  :text="item.name"
			  :bulge="item.id === 2"
			  bulge-bg-color="tn-gradient__cool-6"
			  @click="getTab(item.id)"
			  
			/>
		  </TnTabbar>
		</template>
		<view class="star1"></view>
		<view class="star2"></view>
		<view class="star3"></view>
		<view class="star4"></view>
		<view class="star5"></view>
	</view>
</template>

<script setup>
	import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
	import TnTabbar from '@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar.vue'
	import TnTabbarItem from '@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar-item.vue'
	import { ref } from 'vue';
	import home from '../home/home.vue'
	import my from '../my/my.vue'
	import share from '../share/share.vue'
	
	
	const currentTabbar = ref(0)
	
	// 导航栏数据
	const tabbarData = [
	  {
		id:0,
	    name: '首页',
	    icon: 'home',
	    activeIcon: 'home-fill',
	  },
	  {
		id:1,
	    name: '鸡汤',
	    icon: 'rabbit',
	    activeIcon: 'rabbit',
	  },
	  {
		id:2,
	    name: '积分',
	    icon: 'shop',
	    activeIcon: 'shop-fill',
	  },
	  {
		id:3,
	    name: '热谤',
	    icon: 'fire',
	    activeIcon: 'fire-fill',
	  },
	  {
		id:4,
	    name: '我的',
	    icon: 'my-circle',
	    activeIcon: 'my-circle-fill',
	  },
	]
	
	const getTab = (id) => {
		console.log(id)
	}
	const tabbarPageScrollLower = (e) => {
		console.log(e)
	}
</script>

<style lang="scss" scoped>
	

	.content {
		background: radial-gradient(ellipse at bottom,#1b2735 0%,#090a0f 100%);
		min-height: 100vh;
		.content_swtab {
			position:fixed;
			top: 0;
			left: 0;
			z-index: 9999;
		}
	}
</style>